<template>
    <!-- 头部 搜索、新增 区域 -->
    <el-row :gutter="20" class="header">
        <el-col :span="6">
            <el-input v-model="search" placeholder="请输入计划名称 / 内容" clearable>
                <template #append>
                    <el-button @click="getPatrolPlan"> 搜索 </el-button>
                </template>
            </el-input>
        </el-col>
        <el-col :span="6">
            <el-button @click="createPatrolPlanDialog = true; getFormedEmployee()" type="primary"> 新增
            </el-button></el-col>
    </el-row>

    <!-- 华丽的分割线 -->
    <el-divider />

    <!-- 表格形式展示巡查计划数据 -->
    <el-table :data="patrolPlanData" style="width: 100%" max-height="490px">
        <el-table-column prop="id" v-if="false" />
        <el-table-column prop="name" label="任务名称" width="150" />
        <el-table-column prop="frequency" label="频率" width="100" sortable>

            <template #default="{ row }">
                <el-tag v-if="row.frequency == '0'" effect="dark">测试计划</el-tag>
                <el-tag v-if="row.frequency == '1'" effect="dark">日计划</el-tag>
                <el-tag v-if="row.frequency == '2'" effect="dark">周计划</el-tag>
                <el-tag v-if="row.frequency == '3'" effect="dark">月计划</el-tag>
                <el-tag v-if="row.frequency == '4'" effect="dark">季计划</el-tag>
                <el-tag v-if="row.frequency == '5'" effect="dark">年计划</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="指派人员" width="100">

            <template #default="{ row }">
                <el-button link type="primary" size="small" @click="getDuty(row.id)">查看</el-button>
            </template>
            <!-- <template #default="{ row }"> -->
            <!-- <el-button link type="primary" size="small" @click="showDuty(row.employeeList)">查看</el-button> -->
            <!-- </template> -->
        </el-table-column>
        <el-table-column prop="content" label="计划内容" width="250" />
        <el-table-column prop="status" label="计划状态" width="110" sortable>

            <template #default="{ row }">
                <el-tag v-if="row.status == '0'" type="warning">停用</el-tag>
                <el-tag v-if="row.status == '1'" type="success">启用</el-tag>
            </template>
        </el-table-column>

        <el-table-column fixed="right" label="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;操作" width="150">

            <template #default="{ row }">
                <el-button link type="primary" size="small"
                    @click="getFormedEmployee(); editPatrolPlanDialog = true; editDataTransfer(row)">编辑</el-button>
                <el-popconfirm width="220" confirm-button-text="确认" cancel-button-text="取消"
                    @confirm="deletePatrolPlan(row.id)" icon-color="#F56C6C" title="确认删除此巡查计划？">
                    <template #reference>
                        <el-button link type="primary" size="small">删除</el-button>
                    </template>
                </el-popconfirm>
            </template>

        </el-table-column>

    </el-table>

    <!-- 底部分页器 -->
    <div v-if="total > 0">
        <div class="page-box">
            <div class="pagination-block">
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 50, 100]" :small="true" :disabled="false" :background="true"
                    layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="getPatrolPlan"
                    @current-change="getPatrolPlan" />
            </div>
        </div>
    </div>

    <!-- 新增弹窗 -->
    <el-dialog v-model="createPatrolPlanDialog" title="新增计划" width="60%">
        <el-form v-model="createForm">
            <el-form-item label="计划名称" prop="name">
                <el-input v-model="createForm.name" placeholder="请输入计划名称"></el-input>
            </el-form-item>
            <el-form-item label="计划频率" prop="frequency">
                <el-select v-model="createForm.frequency" placeholder="请输入计划频率">
                    <el-option value="1" label="每日" />
                    <el-option value="2" label="每周" />
                    <el-option value="3" label="每月" />
                    <el-option value="4" label="每季" />
                    <el-option value="5" label="每年" />
                    <el-option value="0" label="其他(测试)" />
                </el-select>
            </el-form-item>
            <el-form-item label="计划状态" prop="status">
                <el-select v-model="createForm.status" placeholder="请选择计划状态">
                    <el-option value="0" label="停用" />
                    <el-option value="1" label="启用" />
                </el-select>
            </el-form-item>
            <el-form-item label="指派人员" prop="dutyArr">
                <el-cascader class="custom-cascader" v-model="createForm.dutyArr" :options="roleEmpOptions" :props="props"
                    :show-all-levels="false" placeholder="按角色选择" collapse-tags clearable />
            </el-form-item>
            <el-form-item label="计划内容" prop="content">
                <el-input v-model="createForm.content" placeholder="请输入计划内容" type="textarea"></el-input>
            </el-form-item>
        </el-form>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="createPatrolPlanDialog = false">取消</el-button>
                <el-button type="primary" @click="createPatrolPlan">确认</el-button>
            </span>
        </template>
    </el-dialog>
    <!-- 编辑弹窗 -->
    <el-dialog v-model="editPatrolPlanDialog" title="编辑计划" width="60%">
        <el-form v-model="editForm">
            <el-form-item label="计划名称" prop="name">
                <el-input v-model="editForm.name" placeholder="请输入计划名称"></el-input>
            </el-form-item>
            <el-form-item label="计划频率" prop="frequency">
                <el-select v-model="editForm.frequency" placeholder="请输入计划频率">
                    <el-option value="1" label="每日" />
                    <el-option value="2" label="每周" />
                    <el-option value="3" label="每月" />
                    <el-option value="4" label="每季" />
                    <el-option value="5" label="每年" />
                    <el-option value="0" label="其他(测试)" />
                </el-select>
            </el-form-item>
            <el-form-item label="计划状态" prop="status">
                <el-select v-model="editForm.status" placeholder="请选择计划状态">
                    <el-option value="0" label="停用" />
                    <el-option value="1" label="启用" />
                </el-select>
            </el-form-item>
            <el-form-item label="指派人员" prop="dutyArr">
                <el-cascader class="custom-cascader" v-model="editForm.dutyArr" :options="roleEmpOptions" :props="props"
                    :show-all-levels="false" placeholder="按角色选择" collapse-tags clearable />
            </el-form-item>
            <el-form-item label="计划内容" prop="content">
                <el-input v-model="editForm.content" placeholder="请输入计划内容" type="textarea"></el-input>
            </el-form-item>
        </el-form>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="createPatrolPlanDialog = false">取消</el-button>
                <el-button type="primary" @click="editPatrolPlan">确认</el-button>
            </span>
        </template>
    </el-dialog>
    <!-- 指派人员弹窗 -->
    <el-dialog v-model="showDutyDialog" title="指派人员" width="30%">
        <el-scrollbar height="100px" class="duty-employee">
            <el-tag class="mytag" size="large" v-for="item in dutyEmployee" :key="item.id" :label="item.name">
                {{ item.name }}</el-tag>
        </el-scrollbar>
    </el-dialog>
</template>



<script setup>
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
const router = useRouter();

import { employeeGetFormedService } from "@/api/user";
import { patrolPlanGetService, patrolPlanCreateService, patrolPlanEditService, patrolPlanDeleteService, patrolPlanGetDutyService } from "@/api/patrol";


// 初始化参数
// 按姓名模糊搜索、分页
const search = ref('')
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
// 弹窗标志
const createPatrolPlanDialog = ref(false)
const editPatrolPlanDialog = ref(false)
const showDutyDialog = ref(false)
const props = {   // cascader的配置值
    expandTrigger: 'hover',// as const,    // 鼠标上悬时展开
    multiple: true, // 多选
    emitPath: false // 只返回被选中的值，不返回路径值
}
const roleEmpOptions = ref([]) // 按角色分类的员工列表
// 新增/编辑表单
const createForm = reactive({
    name: null,
    frequency: null,
    content: null,
    status: null
})
let editForm = reactive({
    id: null,
    name: null,
    frequency: '',
    dutyArr: [''],
    duty: null,
    content: null,
    status: '',
    employeeList: [{ id: null, name: null }]
})
// 编辑时数据回显
const editDataTransfer = function (row) {
    editForm = row;
    editForm.status = editForm.status.toString();
    editForm.frequency = editForm.frequency.toString();
}
// 工单信息列表
const patrolPlanData = ref([])
let dutyEmployee = ref()


// 获取巡查计划
async function getPatrolPlan() {
    try {
        let result = await patrolPlanGetService(search.value, currentPage.value, pageSize.value)
        if (result.code == 200) {
            patrolPlanData.value = result.data.list;
            total.value = result.data.total;
        }
        else if (result.code == 401) {
            ElMessage.error(result.msg)
            router.push({ path: '/login' });
        }
    } catch (error) {
        ElMessage.error('系统异常 (getPatrolPlan)')
    }
}
getPatrolPlan();
// 新增巡查计划
async function createPatrolPlan() {
    try {
        let result = await patrolPlanCreateService(createForm)
        if (result.code == 200) {
            ElMessage.success(result.msg)
            createPatrolPlanDialog.value = false
            getPatrolPlan()
        }
        else if (result.code == 401) {
            ElMessage.error(result.msg)
            router.push({ path: '/login' });
        } else {
            ElMessage.error(result.msg)
        }
    } catch (error) {
        ElMessage.error('系统异常 (createPatrolPlan)')
    }
}
// 删除巡查计划
async function deletePatrolPlan(id) {
    try {
        let result = await patrolPlanDeleteService(id)
        if (result.code == 200) {
            ElMessage.success(result.msg)
            getPatrolPlan()
        }
        else if (result.code == 401) {
            ElMessage.error(result.msg)
            router.push({ path: '/login' });
        } else {
            ElMessage.error(result.msg)
        }
    } catch (error) {
        ElMessage.error('系统异常 (deletePatrolPlan)')
    }
}
// 编辑巡查计划
async function editPatrolPlan() {
    try {
        console.log(editForm)
        console.log(editForm.dutyArr)
        let result = await patrolPlanEditService(editForm)
        if (result.code == 200) {
            ElMessage.success(result.msg)
            getPatrolPlan()
            editPatrolPlanDialog.value = false
        }
        else if (result.code == 401) {
            ElMessage.error(result.msg)
            router.push({ path: '/login' });
        } else {
            ElMessage.error(result.msg)
        }
    } catch (error) {
        ElMessage.error('系统异常 (editPatrolPlan)')
    }
}

async function getFormedEmployee() {
    try {
        let result = await employeeGetFormedService();
        if (result.code == 200) {
            roleEmpOptions.value = result.data;

        }
        else if (result.code == 401) {
            ElMessage.error(result.msg)
            router.push({ path: '/login' });
        }
        else {
            ElMessage.error(result.msg)
        }
    } catch (error) {
        ElMessage.error('系统异常 (getFormedEmployee)')
        console.log(error)
    }
}

async function getDuty(id) {
    try {
        let result = await patrolPlanGetDutyService(id)
        if (result.code == 200) {
            dutyEmployee.value = result.data;
            // console.log(dutyEmployee.value)
            // ElMessage.success(result.msg)
            showDutyDialog.value = true
        }
        else if (result.code == 401) {
            ElMessage.error(result.msg)
            router.push({ path: '/login' });
        } else {
            ElMessage.error(result.msg)
        }
    } catch (error) {
        ElMessage.error('系统异常 (getDuty)')
    }
}



</script>

<style>
.header {
    margin-bottom: 7px;
}

.duty-employee {
    border: 1px solid #409eff;
    border-radius: 4px;
    height: 100px;
    width: 85%;
    margin-top: 10px;
    padding: 10px;
}

.mytag {
    margin: 5px;
}
</style>